<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Warnings | a11y.css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
    <link rel="stylesheet" href="./static/docs.css?v=1690620346339">
    <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
    <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="./static/css/a11y-en_warnings-only.css"><link rel="stylesheet" href="./static/css/a11y-light.min.css">
</head>
  <body>
    <div class="sr-only-focusable" id="skip-links">
      <a href="#toc">Skip to table of content</a>
      <a href="#content">Skip to content</a>
    </div>
    <header role="banner" id="top" tabindex="-1">
  <a href="." id="logo">
    <svg xmlns="http://www.w3.org/2000/svg" width="90" height="89.905" viewBox="0 0 180 179.81" role="img" aria-labelledby="titre">
      <title id="titre">a11y.css</title>
      <path fill="#ffce00" d="M0 8a8 8 0 0 1 8-8h164a8 8 0 0 1 8 8v163.81a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8z"/>
      <path fill="currentColor" d="M80.83 36.9a10 10 0 0 1 5.06-7.18 7.43 7.43 0 0 1 8.53 1.53 8.76 8.76 0 0 1 2.91 6.18c0 4.71.09 64.9 0 68.32a10.42 10.42 0 0 1-1.77 5.83 8 8 0 0 1-8 3.23c-4-.86-6.63-4.74-6.75-8.71s-.01-69.07.02-69.2zM27 120.87c6-4.4 11.77-9.09 17.83-13.4-4-3.22-7.94-6.52-12.17-9.39-3.62-2.46-8.14-5.36-7-10.42a5.86 5.86 0 0 1 3.8-4.43 7.07 7.07 0 0 1 6.19 1.41c2.23 1.7 22.88 17.71 24.22 19.61a5.75 5.75 0 0 1 .63 5.93 13.16 13.16 0 0 1-5 4.79c-4.37 2.7-17.18 12.84-19.54 14.66a8.32 8.32 0 0 1-6.87 1.74 5.47 5.47 0 0 1-4-5 7.62 7.62 0 0 1 .57-3.52 5.84 5.84 0 0 1 1.34-1.98zm126.43.81c2.18 3.27 1.27 7.87-2.57 9.37-4.27 1.67-8-2.09-11.07-4.4-3.81-2.83-7.55-5.73-11.35-8.57-1.72-1.29-3.48-2.48-5.25-3.71a12.08 12.08 0 0 1-4.18-4.35 5.81 5.81 0 0 1 .42-5.41c1-1.69 23.77-19.87 25.64-20.75a6.78 6.78 0 0 1 5.5-.45 6 6 0 0 1 3.43 4.08c1.29 5.07-3.31 8.09-6.93 10.53-2.08 1.41-10.21 7.81-12.27 9.48 3.42 2.33 16.62 12.48 17.46 13.11a10 10 0 0 0 1.21 1.06zM100 141.25a11 11 0 1 1-11-11 11 11 0 0 1 11 11z"/>
    </svg>
  </a><nav role="navigation" aria-label="Main navigation" class="nav">
  <ul class="list-unstyled">
      <li>
        <a href="./errors.html" class="errors">Errors
        </a>
      </li>
      <li>
        <a href="./warnings.html" class="warnings" aria-current="page">Warnings
        </a>
      </li>
      <li>
        <a href="./obsoletes.html" class="obsolete">Obsoletes
        </a>
      </li>
      <li>
        <a href="./advices.html" class="advices">Advices
        </a>
      </li>
      <li>
        <a href="./webextension.html" class="webextension">WebExtension
        </a>
      </li>
      <li>
        <a href="./docs.html" class="sassdoc"><b><abbr title="Application Programming Interface">API</abbr></b> Doc
        </a>
      </li>
      <li>
        <a href="https://github.com/ffoodd/a11y.css">On <b>Github</b><span class="sr-only">&nbsp;(external link)</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
        </a>
      </li>
  </ul>
</nav>
</header>


    <aside role="complementary">
      
<nav role="navigation" aria-labelledby="toc-title" id="toc">
  <p class="box-title" id="toc-title">Table of content</p>
  
    <ol>
        <li>
          <a href="#invalid-list-nesting">Invalid nesting in a list</a>
        </li>
        <li>
          <a href="#invalid-def">Invalid sibling in a definition list</a>
        </li>
        <li>
          <a href="#invalid-def-nesting">Invalid nesting in a definition list</a>
        </li>
        <li>
          <a href="#invalid-figcaption-nesting">figcaption outside a figure</a>
        </li>
        <li>
          <a href="#figure-role">figure without the group ARIA role</a>
        </li>
        <li>
          <a href="#invalid-nesting">Invalid nesting</a>
        </li>
        <li>
          <a href="#misplaced-div">Misplaced div</a>
        </li>
        <li>
          <a href="#sectioning-tags">Misused sectioning tags</a>
        </li>
        <li>
          <a href="#fieldset">legend must be a fieldset&#39;s:first-child</a>
        </li>
        <li>
          <a href="#details">summary must be a details&#39;s:first-child</a>
        </li>
        <li>
          <a href="#empty-title">abbr should have a [title]</a>
        </li>
        <li>
          <a href="#empty-alt">[alt] can be empty but has to be checked</a>
        </li>
        <li>
          <a href="#filename-alt">[alt] containing file name</a>
        </li>
        <li>
          <a href="#decoration">Decorative image shouldn&#39;t have an accessible name</a>
        </li>
        <li>
          <a href="#presentation">[role=presentation] shouldn&#39;t be used on image</a>
        </li>
        <li>
          <a href="#no-aria-role">A role is needed for svg</a>
        </li>
        <li>
          <a href="#autoplay">[autoplay] should probably not be used</a>
        </li>
        <li>
          <a href="#controls">[controls] would be helpful</a>
        </li>
        <li>
          <a href="#empty-nodes">Most of DOM nodes shouldn&#39;t be :empty</a>
        </li>
        <li>
          <a href="#table-layout">A single line table may be used for layout</a>
        </li>
        <li>
          <a href="#nested-table">Nested tables</a>
        </li>
        <li>
          <a href="#table-caption">Every data table must have a caption</a>
        </li>
        <li>
          <a href="#table-structure">Invalid table structure</a>
        </li>
        <li>
          <a href="#missing-thead">Missing head for data table</a>
        </li>
        <li>
          <a href="#th-no-scope">th without [scope] or [id]</a>
        </li>
        <li>
          <a href="#spacer-gif">spacer.gif used</a>
        </li>
        <li>
          <a href="#oops">Bad computed value</a>
        </li>
        <li>
          <a href="#href-js">JS [href]</a>
        </li>
        <li>
          <a href="#empty-href"># [href]</a>
        </li>
        <li>
          <a href="#style-attr">[style] attribute</a>
        </li>
        <li>
          <a href="#unsecured-target">Unsecured [target=_blank]</a>
        </li>
        <li>
          <a href="#no-aria-level">Missing [aria-level]</a>
        </li>
        <li>
          <a href="#no-for">A label without a [for] attribute</a>
        </li>
        <li>
          <a href="#mismatched-dir">Mismatching [dir] and [lang] attributes</a>
        </li>
    </ol>
</nav>


      <div class="box hidden-sm">
        <p class="box-title">Web extensions</p>
        <ul class="list-unstyled">
          <li>
            <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" title="a11y.css Firefox add-on">
              <img src="./static/firefox.svg" width="112" height="42" alt="a11y.css Firefox add-on"/>
            </a>
          </li>
          <li>
            <a href="https://microsoftedge.microsoft.com/addons/detail/a11ycss/lkehmahcnhddkdaemngepjckgcjnidpe" title="a11y.css Edge add-on">
              <img src="./static/edge.svg" width="112" height="42" alt="a11y.css Edge add-on"/>
            </a>
          </li>
          <li>
            <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" title="a11y.css Chrome extension">
              <img src="./static/chrome.svg" width="119" height="42" alt="a11y.css Chrome extension"/>
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <main role="main" id="content" tabindex="-1">
      
  <h1>Warnings</h1>
  
        <article>
          <h2 id="invalid-list-nesting">Invalid nesting in a list</h2>
          <h3>Description</h3>
<p>The only child allowed in <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> is <code>&lt;li&gt;</code> - and the converse is also true.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L313">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L313</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">ul > <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>li<span class="token punctuation">)</span><span class="token punctuation">,</span>
ol > <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>li<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>ul<span class="token punctuation">,</span> ol<span class="token punctuation">)</span> > li
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><ul>
  <p>I feel like I'm lost.</p>
</ul>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>I feel like I'm lost.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="invalid-def">Invalid sibling in a definition list</h2>
          <h3>Description</h3>
<p><code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> should be direct adjacent siblings, and nothing else. Although multiple <code>&lt;dd&gt;</code> may follow a single <code>&lt;dt&gt;</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L312">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L312</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">dt <span class="token operator">+</span> <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>dd<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>dt<span class="token punctuation">,</span> dd<span class="token punctuation">)</span> <span class="token operator">+</span> dd
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><dl>
  <dt>I need a definition, don't you think?</dt>
  <li>I'm a list item.</li>
</dl>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">></span></span>I need a definition, don't you think?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>I'm a list item.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="invalid-def-nesting">Invalid nesting in a definition list</h2>
          <h3>Description</h3>
<p><code>&lt;div&gt;</code>, <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> should be direct children of <code>&lt;dl&gt;</code>.
Any other imbrication may be a crime somewhere.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L318">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L318</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#elementdef-dl">https://html.spec.whatwg.org/multipage/grouping-content.html#elementdef-dl</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>dl<span class="token punctuation">)</span> > dt<span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>dl<span class="token punctuation">)</span> > dd<span class="token punctuation">,</span>
dl > <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>dt<span class="token punctuation">,</span> dd<span class="token punctuation">,</span> div<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><dl>
  <li>I'm a list item.</li>
</dl>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>I'm a list item.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="invalid-figcaption-nesting">figcaption outside a figure</h2>
          <h3>Description</h3>
<p><code>&lt;figcaption&gt;</code> doesn't make sense outside a <code>&lt;figure&gt;</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figcaption-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-figcaption-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>figure<span class="token punctuation">)</span> > figcaption
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><figcaption>I'm captionning something, isn't it?</figcaption>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">></span></span>I'm captionning something, isn't it?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figcaption</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="figure-role">figure without the group ARIA role</h2>
          <h3>Description</h3>
<p><code>&lt;figure&gt;</code> needs <code>[role="group"]</code> for accessibility reason.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.9">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.9</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/groups/">https://www.w3.org/WAI/tutorials/images/groups/</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">figure</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"group"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><figure>
  <img src="/static/ffoodd.png" width="144" height="144" alt="Figcaption test"/>
  <figcaption>I'm a figcaption</figcaption>
</figure>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Figcaption test<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">></span></span>I'm a figcaption<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figcaption</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figure</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="invalid-nesting">Invalid nesting</h2>
          <h3>Description</h3>
<p>Some nestings are forbidden, and do not have their own test case for now:</p>
<ul>
<li><code>&lt;main&gt;</code>  contained in any of <code>&lt;nav&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;header&gt;</code> or <code>&lt;article&gt;</code>;</li>
<li><code>&lt;address&gt;</code>  containing any of <code>&lt;address&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;header&gt;</code> or <code>&lt;article&gt;</code> — neither headings;</li>
<li><code>&lt;option&gt;</code> and <code>&lt;optgroup&gt;</code> outside a <code>&lt;select&gt;</code>;</li>
<li><code>&lt;legend&gt;</code> outside a <code>&lt;fieldset&gt;</code>;</li>
<li><code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> outside a <code>&lt;tr&gt;</code>;</li>
<li>direct children of a <code>&lt;table&gt;</code>;</li>
<li><code>&lt;colgroup&gt;</code> containing anything else than <code>&lt;col&gt;</code>.</li>
</ul>
<p>Maybe other invalid nestings to test. Stay tuned.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2</a>.</li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#elementdef-main">https://html.spec.whatwg.org/multipage/grouping-content.html#elementdef-main</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-address-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-address-element</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">nav main<span class="token punctuation">,</span>
aside main<span class="token punctuation">,</span>
footer main<span class="token punctuation">,</span>
header main<span class="token punctuation">,</span>
article main<span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>tr<span class="token punctuation">)</span> > td<span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>tr<span class="token punctuation">)</span> > th<span class="token punctuation">,</span>
colgroup *<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>col<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>colgroup<span class="token punctuation">)</span> > col<span class="token punctuation">,</span>
tr > <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>td<span class="token punctuation">,</span> th<span class="token punctuation">)</span><span class="token punctuation">,</span>
optgroup > <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>select<span class="token punctuation">)</span> > optgroup<span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>fieldset<span class="token punctuation">)</span> > legend<span class="token punctuation">,</span>
select > <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> optgroup<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>select<span class="token punctuation">,</span> optgroup<span class="token punctuation">)</span> > option<span class="token punctuation">,</span>
table > *<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>thead<span class="token punctuation">,</span> tfoot<span class="token punctuation">,</span> tbody<span class="token punctuation">,</span> tr<span class="token punctuation">,</span> colgroup<span class="token punctuation">,</span> caption<span class="token punctuation">)</span><span class="token punctuation">,</span>
address h1<span class="token punctuation">,</span>
address h2<span class="token punctuation">,</span>
address h3<span class="token punctuation">,</span>
address h4<span class="token punctuation">,</span>
address h5<span class="token punctuation">,</span>
address h6<span class="token punctuation">,</span>
address nav<span class="token punctuation">,</span>
address aside<span class="token punctuation">,</span>
address header<span class="token punctuation">,</span>
address footer<span class="token punctuation">,</span>
address address<span class="token punctuation">,</span>
address article<span class="token punctuation">,</span>
address section
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><legend>I'm an legend. Am I?</legend>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">></span></span>I'm an legend. Am I?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="misplaced-div">Misplaced div</h2>
          <h3>Description</h3>
<p>Did you know that you shouldn't add a <code>&lt;div&gt;</code> inside any inline element?
You could use a <code>&lt;span&gt;</code> instead.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L326">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L326</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">b div<span class="token punctuation">,</span>
i div<span class="token punctuation">,</span>
q div<span class="token punctuation">,</span>
em div<span class="token punctuation">,</span>
abbr div<span class="token punctuation">,</span>
cite div<span class="token punctuation">,</span>
code div<span class="token punctuation">,</span>
span div<span class="token punctuation">,</span>
small div<span class="token punctuation">,</span>
label div<span class="token punctuation">,</span>
strong div
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><b><div>Hey ya!</div></b>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>Hey ya!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="sectioning-tags">Misused sectioning tags</h2>
          <h3>Description</h3>
<p><code>&lt;section&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;article&gt;</code> are sectioning tags.
They must not be used as wrappers!</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L252">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L252</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/dom.html#sectioning-content">https://html.spec.whatwg.org/multipage/dom.html#sectioning-content</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">aside > <span class="token property">aside</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
article > <span class="token property">aside</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
aside > <span class="token property">article</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
aside > <span class="token property">section</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
section > <span class="token property">section</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
article > <span class="token property">section</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
article > <span class="token property">article</span><span class="token punctuation">:</span>first-child
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><aside>
  <section>I'm wrapping, you know.</section>
</aside>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>aside</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>I'm wrapping, you know.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>aside</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="fieldset">legend must be a fieldset&#39;s:first-child</h2>
          <h3>Description</h3>
<p><code>&lt;legend&gt;</code> must be a <code>&lt;fieldset&gt;</code>'s<code>:first-child</code>.
Always.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.6">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.6</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">https://www.w3.org/TR/WCAG21/#labels-or-instructions</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L218">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L218</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">fieldset > *<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>legend<span class="token punctuation">)</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
fieldset > <span class="token property">legend</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>first-child<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><fieldset>
  <label>I'm not a legend.</label>
</fieldset>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span>I'm not a legend.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="details">summary must be a details&#39;s:first-child</h2>
          <h3>Description</h3>
<p><code>&lt;summary&gt;</code> must be a <code>&lt;details&gt;</code>'s<code>:first-child</code>.
Always.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.6">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.6</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">https://www.w3.org/TR/WCAG21/#labels-or-instructions</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#elementdef-summary">https://html.spec.whatwg.org/multipage/interactive-elements.html#elementdef-summary</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#elementdef-details">https://html.spec.whatwg.org/multipage/interactive-elements.html#elementdef-details</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">details > *<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>summary<span class="token punctuation">)</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span>
details > <span class="token property">summary</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>first-child<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><details>
  <legend>I'm not a summary.</legend>
</details>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>details</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">></span></span>I'm not a summary.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>details</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-title">abbr should have a [title]</h2>
          <h3>Description</h3>
<p>Any abbreviation should give an explanation about its meaning, at least on its first occurrence.</p>
<h3>References</h3>
<ul>
<li><a href="https://checklists.opquast.com/en/web-quality-assurance/the-first-occurrence-of-an-abbreviation-or-an-acronym-in-the-body-of-any-page-provides-an-explanation-of-its-meaning">Opquast - Rule 5</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#abbreviations">https://www.w3.org/TR/WCAG21/#abbreviations</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G70">https://www.w3.org/WAI/WCAG21/Techniques/general/G70</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G97">https://www.w3.org/WAI/WCAG21/Techniques/general/G97</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G102">https://www.w3.org/WAI/WCAG21/Techniques/general/G102</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H28">https://www.w3.org/WAI/WCAG21/Techniques/html/H28</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">abbr</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[title]<span class="token punctuation">)</span><span class="token punctuation">,</span>
abbr[title=<span class="token string">" "</span>]<span class="token punctuation">,</span>
abbr[title=<span class="token string">""</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><p>Do you know about <abbr>W3C</abbr>?</p>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Do you know about <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>abbr</span><span class="token punctuation">></span></span>W3C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">></span></span>?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-alt">[alt] can be empty but has to be checked</h2>
          <h3>Description</h3>
<p>An alternative has to be empty when image is decorative only. In any other case, <code>[alt]</code> must be defined.
That should be double-checked.</p>
<h3>References</h3>
<ul>
<li><a href="https://checklists.opquast.com/en/web-quality-assurance/each-decorative-image-has-an-appropriate-text-alternative">Opquast - Rule 111</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2</a></li>
<li><a href="https://www.accede-web.com/notices/html-et-css/images-et-icones/gerer-lattribut-alt-des-balises-img-et-input-typeimage/">https://www.accede-web.com/notices/html-et-css/images-et-icones/gerer-lattribut-alt-des-balises-img-et-input-typeimage/</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">https://www.w3.org/WAI/tutorials/images/decision-tree/</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/images.html#alt">https://html.spec.whatwg.org/multipage/images.html#alt</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H67">https://www.w3.org/WAI/WCAG21/Techniques/html/H67</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F39">https://www.w3.org/WAI/WCAG21/Techniques/failures/F39</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F38">https://www.w3.org/WAI/WCAG21/Techniques/failures/F38</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">img[alt=<span class="token string">""</span>]<span class="token punctuation">,</span>
area[alt=<span class="token string">""</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt=<span class="token string">""</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt=<span class="token string">""</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt=<span class="token string">""</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><img alt="" src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="filename-alt">[alt] containing file name</h2>
          <h3>Description</h3>
<p>A file name in <code>[alt]</code> is probably wrongly automated… and would never ever help any user.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2</a></li>
<li><a href="https://www.accede-web.com/notices/html-et-css/images-et-icones/gerer-lattribut-alt-des-balises-img-et-input-typeimage/">https://www.accede-web.com/notices/html-et-css/images-et-icones/gerer-lattribut-alt-des-balises-img-et-input-typeimage/</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">https://www.w3.org/WAI/tutorials/images/decision-tree/</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/images.html#alt">https://html.spec.whatwg.org/multipage/images.html#alt</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H67">https://www.w3.org/WAI/WCAG21/Techniques/html/H67</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F39">https://www.w3.org/WAI/WCAG21/Techniques/failures/F39</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F38">https://www.w3.org/WAI/WCAG21/Techniques/failures/F38</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">img[alt$=<span class="token string">".pdf"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".pdf"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".pdf"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".doc"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".doc"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".doc"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".png"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".png"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".png"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".jpg"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".jpg"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".jpg"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".gif"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".gif"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".gif"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".mp3"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".mp3"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mp3"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".mp4"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".mp4"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mp4"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".mov"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".mov"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mov"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".ogg"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".ogg"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".ogg"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".xls"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".xls"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".xls"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".txt"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".txt"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".txt"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".zip"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".zip"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".zip"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".rar"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".rar"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".rar"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".docx"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".docx"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".docx"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".webp"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".webp"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".webp"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".apng"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".apng"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".apng"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".svg"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".svg"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".svg"</span>]<span class="token punctuation">,</span>
img[alt$=<span class="token string">".svgz"</span>]<span class="token punctuation">,</span>
area[alt$=<span class="token string">".svgz"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt$=<span class="token string">".svgz"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".pdf"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".pdf"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".doc"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".doc"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".png"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".png"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".jpg"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".jpg"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".gif"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".gif"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mp3"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mp3"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mp4"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mp4"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mov"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".mov"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".ogg"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".ogg"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".xls"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".xls"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".txt"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".txt"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".zip"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".zip"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".rar"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".rar"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".docx"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".docx"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".webp"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".webp"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".apng"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".apng"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".svg"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".svg"</span>]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][alt$=<span class="token string">".svgz"</span>]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][alt$=<span class="token string">".svgz"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><img alt="/static/ffoodd.png" src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="decoration">Decorative image shouldn&#39;t have an accessible name</h2>
          <h3>Description</h3>
<p>Any decorative image — with <code>[aria-hidden="true"]</code> or empty <code>[alt]</code> — shouldn't have any of those:</p>
<ul>
<li><code>[title]</code>;</li>
<li><code>[aria-label]</code>;</li>
<li><code>[aria-labelledby]</code>;</li>
<li><code>[aria-describedby]</code>;</li>
<li>a <code>&lt;title&gt;</code> child;</li>
<li>or a <code>&lt;desc&gt;</code>.</li>
</ul>
<p>This test currently can't check if any <code>&lt;title&gt;</code> nor <code>&lt;desc&gt;</code> child is present since <code>&lt;svg&gt;</code> is a replaced elements.
See <a href="https://github.com/ffoodd/a11y.css/wiki/Edge-cases-and-known-issues">Edge cases and known issues</a> on a11y.css' wiki.</p>
<h3>References</h3>
<ul>
<li><a href="https://checklists.opquast.com/en/web-quality-assurance/each-decorative-image-has-an-appropriate-text-alternative">Opquast - Rule 111</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2</a></li>
<li><a href="https://www.accede-web.com/notices/html-et-css/images-et-icones/gerer-lattribut-alt-des-balises-img-et-input-typeimage/#ancre-01">https://www.accede-web.com/notices/html-et-css/images-et-icones/gerer-lattribut-alt-des-balises-img-et-input-typeimage/#ancre-01</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">https://www.w3.org/WAI/tutorials/images/decision-tree/</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#presentation">https://www.w3.org/TR/wai-aria-1.2/#presentation</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/images.html#alt">https://html.spec.whatwg.org/multipage/images.html#alt</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H67">https://www.w3.org/WAI/WCAG21/Techniques/html/H67</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F39">https://www.w3.org/WAI/WCAG21/Techniques/failures/F39</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F38">https://www.w3.org/WAI/WCAG21/Techniques/failures/F38</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F65">https://www.w3.org/WAI/WCAG21/Techniques/failures/F65</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">img[alt=<span class="token string">""</span>][title]<span class="token punctuation">,</span>
img[alt=<span class="token string">""</span>][aria-label]<span class="token punctuation">,</span>
img[alt=<span class="token string">""</span>][aria-labelledby]<span class="token punctuation">,</span>
img[alt=<span class="token string">""</span>][aria-describedby]<span class="token punctuation">,</span>
<span class="token property">area</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[href]<span class="token punctuation">)</span>[alt]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[alt=<span class="token string">""</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">area</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[href]<span class="token punctuation">)</span>[alt=<span class="token string">""</span>][title]<span class="token punctuation">,</span>
<span class="token property">area</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[href]<span class="token punctuation">)</span>[alt=<span class="token string">""</span>][aria-label]<span class="token punctuation">,</span>
<span class="token property">area</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[href]<span class="token punctuation">)</span>[alt=<span class="token string">""</span>][aria-labelledby]<span class="token punctuation">,</span>
<span class="token property">area</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[href]<span class="token punctuation">)</span>[alt=<span class="token string">""</span>][aria-describedby]<span class="token punctuation">,</span>
svg[aria-hidden=<span class="token string">"true"</span>][title]<span class="token punctuation">,</span>
svg[aria-hidden=<span class="token string">"true"</span>][aria-label]<span class="token punctuation">,</span>
svg[aria-hidden=<span class="token string">"true"</span>][aria-labelledby]<span class="token punctuation">,</span>
svg[aria-hidden=<span class="token string">"true"</span>][aria-describedby]<span class="token punctuation">,</span>
canvas[aria-hidden=<span class="token string">"true"</span>][title]<span class="token punctuation">,</span>
canvas[aria-hidden=<span class="token string">"true"</span>][aria-label]<span class="token punctuation">,</span>
canvas[aria-hidden=<span class="token string">"true"</span>][aria-labelledby]<span class="token punctuation">,</span>
canvas[aria-hidden=<span class="token string">"true"</span>][aria-describedby]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][title]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][aria-label]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][aria-labelledby]<span class="token punctuation">,</span>
embed[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][aria-describedby]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][title]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][aria-label]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][aria-labelledby]<span class="token punctuation">,</span>
object[type=<span class="token string">"image"</span>][aria-hidden=<span class="token string">"true"</span>][aria-describedby]<span class="token punctuation">,</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true" title="Decorative SVG, you punk!">
  <rect x="400" y="100" width="400" height="200"
        fill="forestgreen" stroke="darkgreen" stroke-width="10"  />
</svg><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12cm<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4cm<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 1200 400<span class="token punctuation">"</span></span>
     <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span>
     <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Decorative SVG, you punk!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span>
        <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>forestgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>darkgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span>  <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="presentation">[role=presentation] shouldn&#39;t be used on image</h2>
          <h3>Description</h3>
<p>Any decorative image should be marked up with <code>[aria-hidden="true"]</code> (or empty <code>[alt]</code> if <code>&lt;img&gt;</code>).
<code>[role=presentation]</code> shall do the trick but at the time of writing, its support is too low compared
to empty <code>[alt]</code> or <code>[aria-hidden=true]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decorative/">https://www.w3.org/WAI/tutorials/images/decorative/</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">img[role=<span class="token string">"presentation"</span>]<span class="token punctuation">,</span>
svg[role=<span class="token string">"presentation"</span>]<span class="token punctuation">,</span>
area[role=<span class="token string">"presentation"</span>]<span class="token punctuation">,</span>
embed[role=<span class="token string">"presentation"</span>]<span class="token punctuation">,</span>
canvas[role=<span class="token string">"presentation"</span>]<span class="token punctuation">,</span>
object[role=<span class="token string">"presentation"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg"
     role="presentation">
  <rect x="400" y="100" width="400" height="200"
        fill="forestgreen" stroke="darkgreen" stroke-width="10"  />
</svg><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12cm<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4cm<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 1200 400<span class="token punctuation">"</span></span>
     <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span>
     <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>presentation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span>
        <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>forestgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>darkgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span>  <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-aria-role">A role is needed for svg</h2>
          <h3>Description</h3>
<p>Any <code>&lt;svg&gt;</code> should either have <code>[aria-hidden="true"]</code> if decorative, or a <code>[role="img"]</code> if informative.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F65">https://www.w3.org/WAI/WCAG21/Techniques/failures/F65</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">svg</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-hidden=<span class="token string">"true"</span>]<span class="token punctuation">,</span> [role=<span class="token string">"img"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg"
     aria-label="Decorative SVG, you punk!">
  <rect x="400" y="100" width="400" height="200"
        fill="forestgreen" stroke="darkgreen" stroke-width="10"  />
</svg><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12cm<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4cm<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 1200 400<span class="token punctuation">"</span></span>
     <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span>
     <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Decorative SVG, you punk!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span>
        <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>forestgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>darkgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span>  <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="autoplay">[autoplay] should probably not be used</h2>
          <h3>Description</h3>
<p>A time-based media like <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> should not <code>[autoplay]</code>, because it can be quite surprising for the user.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.10">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.10</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.8">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.8</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#audio-control">https://www.w3.org/TR/WCAG21/#audio-control</a></li>
<li><a href="http://www.punkchip.com/autoplay-is-bad-for-all-users/">http://www.punkchip.com/autoplay-is-bad-for-all-users/</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">video[autoplay]<span class="token punctuation">,</span>
audio[autoplay]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><video autoplay controls src=""></video><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">controls</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="controls">[controls] would be helpful</h2>
          <h3>Description</h3>
<p>A time-based media like <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> would be easier to use if <code>[controls]</code> are activated for the user.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.11">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.11</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.12">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.12</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded">https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#keyboard">https://www.w3.org/TR/WCAG21/#keyboard</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#no-keyboard-trap">https://www.w3.org/TR/WCAG21/#no-keyboard-trap</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G4">https://www.w3.org/WAI/WCAG21/Techniques/general/G4</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">video</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[controls]<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">audio</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[controls]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><video src=""></video><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-nodes">Most of DOM nodes shouldn&#39;t be :empty</h2>
          <h3>Description</h3>
<p>Obviously void elements are empty, as well as <code>&lt;iframe&gt;</code> and <code>&lt;textarea&gt;</code> could be <code>:empty</code>.
Any other <code>:empty</code> tag that is not hidden is probably useless, and should be deleted.</p>
<p>Please note that it's disabled for tags owning a source through <code>[src]</code>. It's pretty opinionated,
but it's meant to avoid false positives on tags such as <code>&lt;video&gt;</code> or <code>&lt;audio&gt;</code> which may be
empty if they have at least one source specified through <code>[src]</code>.</p>
<h3>Notes</h3>
<ul>
<li>This test only targets tags in <code>&lt;body&gt;</code>, since most of head's tags should be empty.</li>
<li><code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> are also excluded since <code>button:empty</code> and <code>a:empty</code> are both covered by their own error.</li>
</ul>
<p>We could use the <code>:blank</code> pseudo-class, but at this time its support is very poor. We could also use the <code>:-moz-only-whitespace</code> pseudo-class, but support is limited to Firefox and thus could invalidate our selectors stack…</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L243">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L243</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/syntax.html#void-elements">https://html.spec.whatwg.org/multipage/syntax.html#void-elements</a></li>
<li><a href="https://drafts.csswg.org/selectors-4/#the-blank-pseudo">https://drafts.csswg.org/selectors-4/#the-blank-pseudo</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace">https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace</a></li>
<li><a href="https://css-tricks.com/almanac/selectors/b/blank/">https://css-tricks.com/almanac/selectors/b/blank/</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">body *<span class="token punctuation">:</span><span class="token property">empty</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[hidden]<span class="token punctuation">,</span> [aria-hidden]<span class="token punctuation">,</span> [src]<span class="token punctuation">,</span> button<span class="token punctuation">,</span> a<span class="token punctuation">,</span> iframe<span class="token punctuation">,</span> textarea<span class="token punctuation">,</span> area<span class="token punctuation">,</span> base<span class="token punctuation">,</span> br<span class="token punctuation">,</span> col<span class="token punctuation">,</span> command<span class="token punctuation">,</span> embed<span class="token punctuation">,</span> hr<span class="token punctuation">,</span> img<span class="token punctuation">,</span> input<span class="token punctuation">,</span> keygen<span class="token punctuation">,</span> link<span class="token punctuation">,</span> meta<span class="token punctuation">,</span> param<span class="token punctuation">,</span> source<span class="token punctuation">,</span> track<span class="token punctuation">,</span> wbr<span class="token punctuation">,</span> title<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><p id="empty-node_code"></p>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>empty-node_code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="table-layout">A single line table may be used for layout</h2>
          <h3>Description</h3>
<p>A lonely <code>&lt;tr&gt;</code> can be a symptom of a table used for layout.
Should be double checked!</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.3">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.3</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#meaningful-sequence">https://www.w3.org/TR/WCAG21/#meaningful-sequence</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">table</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span> > <span class="token property">tr</span><span class="token punctuation">:</span>only-child<span class="token punctuation">,</span>
<span class="token property">table</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span> > tbody > <span class="token property">tr</span><span class="token punctuation">:</span>only-child
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table>
  <caption>I'm a caption :3</caption>
  <thead>
    <tr>
      <th scope="col">Oh boy…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I'm a poor lonesone table-roooow!</td>
    </tr>
  </tbody>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>I'm a caption :3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh boy…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a poor lonesone table-roooow!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="nested-table">Nested tables</h2>
          <h3>Description</h3>
<p>There's no good reason to nest data tables: thus it probably means we're facing a layout table…</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.3">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.3</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#meaningful-sequence">https://www.w3.org/TR/WCAG21/#meaningful-sequence</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/tables/tips/">https://www.w3.org/WAI/tutorials/tables/tips/</a></li>
<li><a href="https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L175">https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L175</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">table table
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table>
  <caption>I'm a caption :3</caption>
  <thead>
    <tr>
      <th scope="col">Oh boy…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I'm a table-cell!</td>
    </tr>
    <tr>
      <td>
        <table>
          <caption>I'm a caption too!</caption>
          <thead>
            <tr>
              <th scope="col">Oh boy…</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>I'm a table-cell!</td>
            </tr>
            <tr>
              <td>I'm a table-cell!</td>
            </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>I'm a caption :3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh boy…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table-cell!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>I'm a caption too!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh boy…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table-cell!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table-cell!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="table-caption">Every data table must have a caption</h2>
          <h3>Description</h3>
<p><code>&lt;caption&gt;</code> is needed for data <code>&lt;table&gt;</code>.
And it must be the <code>:first-child</code>, by the way.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.4">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.4</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/tables.html#the-caption-element">https://html.spec.whatwg.org/multipage/tables.html#the-caption-element</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H39">https://www.w3.org/WAI/WCAG21/Techniques/html/H39</a></li>
<li><a href="https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L309">https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L309</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">table</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span> > <span class="token property">caption</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>first-child<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">table</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span> > *<span class="token punctuation">:</span><span class="token property">first-child</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>caption<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table>
  <thead>
    <tr>
      <th id="th-one">I'm a table without a caption!</th>
      <th id="th-two">I'm a table without a caption!</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" headers="th-one th-two">I'm a table without a caption!</td>
    </tr>
    <tr>
      <td colspan="2" headers="th-one th-two">I'm a table without a caption!</td>
    </tr>
  </tbody>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>th-one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a table without a caption!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>th-two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a table without a caption!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">headers</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>th-one th-two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a table without a caption!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">headers</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>th-one th-two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a table without a caption!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="table-structure">Invalid table structure</h2>
          <h3>Description</h3>
<p><code>&lt;thead&gt;</code>, <code>&lt;tfoot&gt;</code> and <code>&lt;tbody&gt;</code> must be in this order.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L314">https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L314</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">table > tfoot ~ thead<span class="token punctuation">,</span>
table > tbody ~ tfoot<span class="token punctuation">,</span>
table > tbody ~ thead<span class="token punctuation">,</span>
table > tfoot ~ colgroup<span class="token punctuation">,</span>
table > tbody ~ colgroup<span class="token punctuation">,</span>
table > tbody ~ colgroup
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table>
  <caption>I'm a caption</caption>
  <thead>
    <tr>
      <th scope="col">Where's my foot?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I'm a table with tfoot done wrong.</td>
      <td>I'm a table with tfoot done wrong.</td>
    </tr>
    <tr>
      <td>I'm a table with tfoot done wrong.</td>
      <td>I'm a table with tfoot done wrong.</td>
    </tr>
  </tbody>
  <tfoot>
    <th id="th-1">I'm a table with tfoot done wrong.</th>
    <th id="th-2">I'm a table with tfoot done wrong.</th>
  </tfoot>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>I'm a caption<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Where's my foot?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table with tfoot done wrong.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table with tfoot done wrong.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table with tfoot done wrong.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table with tfoot done wrong.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tfoot</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>th-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a table with tfoot done wrong.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>th-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a table with tfoot done wrong.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tfoot</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="missing-thead">Missing head for data table</h2>
          <h3>Description</h3>
<p><code>&lt;thead&gt;</code> is strongly needed if <code>&lt;tbody&gt;</code> is present.</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">table</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span> > caption <span class="token operator">+</span> tbody<span class="token punctuation">,</span>
<span class="token property">table</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span> > <span class="token property">tbody</span><span class="token punctuation">:</span>first-child
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table>
  <caption>Missing thead</caption>
  <tbody>
    <tr>
      <td>I'm a table without thead.</td>
      <td>I'm a table without thead.</td>
    </tr>
    <tr>
      <td>I'm a table without thead.</td>
      <td>I'm a table without thead.</td>
    </tr>
  </tbody>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>Missing thead<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table without thead.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table without thead.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table without thead.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a table without thead.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="th-no-scope">th without [scope] or [id]</h2>
          <h3>Description</h3>
<p><code>&lt;th&gt;</code> strongly needs an <code>[id]</code> or a <code>[scope]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.7">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.7</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H43">https://www.w3.org/WAI/WCAG21/Techniques/html/H43</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">th</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[scope]<span class="token punctuation">,</span> [id]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table>
  <caption>Need for a [scope] or [id]</caption>
  <thead>
    <tr>
      <th>I'm a th without [scope] or [id].</th>
      <th scope="col">I'm a th with [scope].</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I'm a td missing something.</td>
      <td>I'm a td missing something.</td>
    </tr>
    <tr>
      <td>I'm a td feeling well.</td>
      <td>I'm a td feeling well.</td>
    </tr>
  </tbody>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>Need for a [scope] or [id]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">></span></span>I'm a th without [scope] or [id].<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a th with [scope].<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a td missing something.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a td missing something.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a td feeling well.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>I'm a td feeling well.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="spacer-gif">spacer.gif used</h2>
          <h3>Description</h3>
<p>Believe me, this still have to be tested.</p>
<h3>References</h3>
<ul>
<li><a href="https://www.la-grange.net/2015/03/11/visible">https://www.la-grange.net/2015/03/11/visible</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">img[src*=<span class="token string">"1px.gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
img[src*=<span class="token string">"1x1.gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
img[src*=<span class="token string">"clear.gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
img[src*=<span class="token string">"spacer.gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
img[src*=<span class="token string">"dotclear.gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
img[src*=<span class="token string">"transparent.gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
img[src*=<span class="token string">"pixel-1x1-clear.gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"presentation"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><img src="/static/spacer.gif" alt="Spacer.gif" width="100" height="100"/><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/spacer.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Spacer.gif<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="oops">Bad computed value</h2>
          <h3>Description</h3>
<p>Don't laugh, shit happens.</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[id*=<span class="token string">"NaN"</span>]<span class="token punctuation">,</span>
[id*=<span class="token string">"null"</span>]<span class="token punctuation">,</span>
[class*=<span class="token string">"NaN"</span>]<span class="token punctuation">,</span>
[class*=<span class="token string">"null"</span>]<span class="token punctuation">,</span>
[id*=<span class="token string">"undefined"</span>]<span class="token punctuation">,</span>
[class*=<span class="token string">"undefined"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><p class="undefined">Oups, something went wrong.</p>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>undefined<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oups, something went wrong.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="href-js">JS [href]</h2>
          <h3>Description</h3>
<p>The <code>[href]</code> attribute should not start with "javascript".
Should probably be a <code>&lt;button&gt;</code> or at least a <code>[role="button"]</code>, don't you think?
The only exception shall be bookmarklets.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">a[href^=<span class="token string">"javascript"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"button"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="javascript:(function(){a11ycss=document.createElement('LINK');a11ycss.href='https://rawgit.com/ffoodd/a11y.css/master/css/a11y-en.css';a11ycss.rel='stylesheet';a11ycss.media='all';document.body.appendChild(a11ycss);})();">Please use my bookmarklet ;)</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:(function(){a11ycss=document.createElement('LINK');a11ycss.href='https://rawgit.com/ffoodd/a11y.css/master/css/a11y-en.css';a11ycss.rel='stylesheet';a11ycss.media='all';document.body.appendChild(a11ycss);})();<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Please use my bookmarklet ;)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-href"># [href]</h2>
          <h3>Description</h3>
<p>The <code>[href]</code> attribute is only containing <code>#</code>.
Should probably be a <code>&lt;button&gt;</code> or at least a <code>[role="button"]</code>, don't you think?</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">a[href=<span class="token string">"#"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"button"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="#">Oh boy, I don't mean anything</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh boy, I don't mean anything<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="style-attr">[style] attribute</h2>
          <h3>Description</h3>
<p>Your styles should be driven by a CSS file. That's it.
And no, JS shouldn't manipulate styles: it's better to play with classes, for example.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#meaningful-sequence">https://www.w3.org/TR/WCAG21/#meaningful-sequence</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[style]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><div style="color: red;">I'm red. I really feel dirty.</div>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>I'm red. I really feel dirty.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="unsecured-target">Unsecured [target=_blank]</h2>
          <h3>Description</h3>
<p><code>[target="_blank"]</code> links might be used for phishing.
This is not actually an accessibility related issue, but everything helping users is welcome.</p>
<h3>References*</h3>
<ul>
<li><a href="https://mathiasbynens.github.io/rel-noopener/">https://mathiasbynens.github.io/rel-noopener/</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/semantics.html#link-type-noopener">https://html.spec.whatwg.org/multipage/semantics.html#link-type-noopener</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/semantics.html#link-type-noreferrer">https://html.spec.whatwg.org/multipage/semantics.html#link-type-noreferrer</a></li>
<li><a href="https://dev.to/ben/the-targetblank-vulnerability-by-example">https://dev.to/ben/the-targetblank-vulnerability-by-example</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[target$=<span class="token string">"blank"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[rel]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[target$=<span class="token string">"blank"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[rel*=<span class="token string">"noopener"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[target$=<span class="token string">"blank"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[rel*=<span class="token string">"noreferrer"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="/" target="_blank">I feel vulnerable…</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I feel vulnerable…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-aria-level">Missing [aria-level]</h2>
          <h3>Description</h3>
<p>Though <code>[aria-level]</code> is not required by ARIA specification, it's actually better to specify it.</p>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-level">https://www.w3.org/TR/wai-aria-1.2/#aria-level</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1</a></li>
<li><a href="https://github.com/DISIC/rgaa_methodologie/blob/master/Check-css/check-heading.css">https://github.com/DISIC/rgaa_methodologie/blob/master/Check-css/check-heading.css</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#heading">https://www.w3.org/TR/wai-aria-1.2/#heading</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA12">https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA12</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G141">https://www.w3.org/WAI/WCAG21/Techniques/general/G141</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H42">https://www.w3.org/WAI/WCAG21/Techniques/html/H42</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"heading"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-level]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><strong role="heading">Heading with undefined level</strong>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Heading with undefined level<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-for">A label without a [for] attribute</h2>
          <h3>Description</h3>
<p>A <code>&lt;label&gt;</code> is labelling something, in theory.
Although implicitly labelling form controls is accepted, it's probably better to double-check that form control is <em>really</em> nested in its <code>&lt;label&gt;</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.2</a></li>
<li><a href="https://github.com/DISIC/rgaa_referentiel_en/blob/44e2bee0c710e37ca49901b1e6b8fae9b553fd5d/criteria.html#L3981">https://github.com/DISIC/rgaa_referentiel_en/blob/44e2bee0c710e37ca49901b1e6b8fae9b553fd5d/criteria.html#L3981</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44">https://www.w3.org/WAI/WCAG21/Techniques/html/H44</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/forms/labels/">https://www.w3.org/WAI/tutorials/forms/labels/</a></li>
<li><a href="https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/">https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">https://www.w3.org/TR/WCAG21/#labels-or-instructions</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#headings-and-labels">https://www.w3.org/TR/WCAG21/#headings-and-labels</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">label</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[for]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><label>Guess what?</label>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span>Guess what?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="mismatched-dir">Mismatching [dir] and [lang] attributes</h2>
          <h3>Description</h3>
<p>Some languages — like Arabic or Hebrew — requires a text direction switch usin <code>[dir="rtl"]</code>, as default text direction is left-to-right.
This also requires to check any in-page language change (marked up with <code>[lang]</code>) in Arabic or Hebrew content to define <code>[dir]</code> too.</p>
<h3>References</h3>
<ul>
<li><a href="https://alphagov.github.io/accessibility-tool-audit/test-cases.html#languageofcontent">https://alphagov.github.io/accessibility-tool-audit/test-cases.html#languageofcontent</a></li>
<li><a href="https://www.w3.org/International/questions/qa-html-dir">https://www.w3.org/International/questions/qa-html-dir</a></li>
<li><a href="https://www.w3.org/International/articles/inline-bidi-markup/#dirattribute">https://www.w3.org/International/articles/inline-bidi-markup/#dirattribute</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute">https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[lang=<span class="token string">"ar"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[dir=<span class="token string">"rtl"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[lang=<span class="token string">"he"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[dir=<span class="token string">"rtl"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[lang=<span class="token string">"ar"</span>] [lang]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[dir=<span class="token string">"ltr"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[lang=<span class="token string">"he"</span>] [lang]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[dir=<span class="token string">"ltr"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[dir=<span class="token string">"rtl"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[lang=<span class="token string">"ar"</span>]<span class="token punctuation">,</span> [lang=<span class="token string">"he"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><p dir="rtl" lang="en">Well, I'm kinda disoriented…</p>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Well, I'm kinda disoriented…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>

      
    </main>
    <footer role="contentinfo">
  <p class="builtWith box">
      Built with
      <a href="https://www.11ty.dev/">
        Eleventy
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>-
      </a>
      and supported by
      <a href="https://www.jetbrains.com/?from=a11y.css">
        JetBrains
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
      </a>
    </p>
    <div>
      <p>® 2014 —&nbsp;2023 <strong>Gaël Poupard</strong></p>
      <p>This project is distributed under license <a href="https://opensource.org/license/mit/">MIT</a> and <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. <a href="#skip-links">Back to top</a></p>
    </div>
</footer>

    <script src="./static/docs.js?v=1690620346340"></script>
  </body>
</html>
